<template>
	<wsPage title="app版本列表">
		<div slot="page_operate">
			<Button  @click="refreshPage"><Icon type="refresh"></Icon><span>刷新</span></Button>
		</div>
		<wsSmPanel :page="table.page" @simple-query="query" @page-change="query">
			<div slot="query_form">
				<Form :model="queryForm" :label-width="100" inline>
					<FormItem label="app名字">
			            <Input v-model="queryForm.name" placeholder="请输入"></Input>
			        </FormItem>
			        <FormItem label="系统">
			            <Select clearable v-model="queryForm.system" placeholder="请选择" class="ws-form-select">
			                <Option value="1">安卓</Option>
			                <Option value="2">IOS</Option>
			            </Select>
			        </FormItem>
                    <FormItem label="平台">
			            <Select clearable v-model="queryForm.platform" placeholder="请选择" class="ws-form-select">
			                <Option value="1">用户端</Option>
			                <Option value="2">商家端</Option>
			            </Select>
			        </FormItem>
				</Form>
			</div>
			<div slot="list_operate">
				<Button  @click="showAddModal">新增APP版本</Button>
			</div>
			<div slot="list_data">
				<Table border :columns="table.columns" :data="table.data"></Table>
			</div>
		</wsSmPanel>
		
		<!--新增账号弹框-->
		<wsModal v-model="appModal.show" ok-text="保存" title="新增APP版本" @on-ok="saveModal" @on-cancel="cancelModal">
		    <Form ref="appVersionForm" :model="appModal.form" :rules="appModal.validate" :label-width="100">
		        <FormItem label="APP名字" prop="name">
		            <Input v-model="appModal.form.name" autofocus></Input>
		        </FormItem>
		        <FormItem label="APP版本号" prop="version">
		            <Input v-model="appModal.form.version" autofocus></Input>
		        </FormItem>
		        <FormItem label="APP文件路径" prop="url">
		            <Input v-model="appModal.form.url" autofocus></Input>
		        </FormItem>
				<FormItem label="APP文件大小" prop="size">
		            <Input v-model="appModal.form.size" autofocus></Input>
		        </FormItem>
                <FormItem label="是否强制更新" prop="promotionStatus">
					<RadioGroup v-model="appModal.form.forceUpgrade">
						<Radio :label="0">否</Radio>
						<Radio :label="1">是</Radio>
					</RadioGroup>
				</FormItem>
                <FormItem label="APP系统" prop="system">
		            <Select clearable v-model="appModal.form.system" placeholder="请选择" class="ws-form-select">
			            <Option value="1">安卓</Option>
			            <Option value="2">IOS</Option>
			        </Select>
		        </FormItem>
                <FormItem label="APP平台" prop="platform">
		            <Select clearable v-model="appModal.form.platform" placeholder="请选择" class="ws-form-select">
			            <Option value="1">用户端</Option>
			            <Option value="2">商家端</Option>
			        </Select>
		        </FormItem>
                <FormItem label="APP升级描述" prop="upgradeDesc">
		            <textarea  v-model="appModal.form.upgradeDesc" autofocus style="width: 100%; height: 88px"/>
		        </FormItem>

		    </Form>			
		</wsModal>	 

        <!--新增账号弹框-->
		<wsModal v-model="appModal.isShow" ok-text="确认" title="查看APP版本详情" @on-ok="cancelQueryModal" @on-cancel="cancelQueryModal">
		    <Form ref="appVersionForm" :model="appModal.form" :label-width="100">
		        <FormItem label="APP名字：">
		            {{appModal.form.name}}
		        </FormItem>
		        <FormItem label="APP版本号：">{{appModal.form.version}}
		        </FormItem>
		        <FormItem label="APP文件路径：">{{appModal.form.url}}
		        </FormItem>
				<FormItem label="APP文件大小：">{{appModal.form.size}}</Input>
		        </FormItem>
                <FormItem label="是否强制更新：">{{appModal.form.forceUpgrade == 1 ? '是' : '否'}} 
		        </FormItem>
                <FormItem label="APP系统：">{{appModal.form.system == 1 ? '安卓' : 'IOS'}} 
		        </FormItem>
                <FormItem label="APP平台：">{{appModal.form.platform == 1 ? '用户端' : '商家端'}} 
		        </FormItem>
                <FormItem label="APP升级描述：">{{appModal.form.upgradeDesc}}
		        </FormItem>

		    </Form>			
		</wsModal>	 
	</wsPage>
</template>

<script>
	import Util from '../../../common/util.js';
	import Common from '../../../common/common.js';
	export default {
		data() {
			return {
				queryForm: {
					name: '',
					system: 0,
                    platform: 0
				},
				table: {
					columns: [{
						title: 'APP名字',
                        key: 'name',
                        width: 310,
                        align: 'center'
					},
					{
						title: 'APP版本号',
                        key: 'version',
                        width: 250,
                        align: 'center'
					},
					{
						title: 'APP文件路径',
                        key: 'url',
                        align: 'center'
					},
                    {
						title: 'APP文件大小',
                        key: 'size',
                        align: 'center'
					},
                    {
						title: 'APP系统',
                        key: 'system',
                        align: 'center',
                        render: (h, params) => {
							return h('span',{

							},params.row.system == "1"?"安卓":"IOS")
						}
					},
                    {
						title: 'APP平台',
                        key: 'platform',
                        align: 'center',
                        render: (h, params) => {
							return h('span',{

							},params.row.platform == "1"?"用户系统":"商家系统")
						}
					},
					{
						title: '创建时间',
                        key: 'createDate',
                        align: 'center'
					},
					{
						title: '操作',
						width: 180,
						fixed: 'right',
						align: 'center',
						render: (h, params) => {
							return h('div', [
								h('Button', {
									props: {
	                                    type: 'text',
	                                    size: 'small'
	                                },
									on: {
										click: () => {
											let rowId = params.row.id;
                                    		this.showEditModal(rowId);
										}
									}
								}, '查看'),
								h('Button', {
									props: {
	                                    type: 'text',
	                                    size: 'small'
	                                },
									on: {
										click: () => {
											let rowId = params.row.id;
                                    		this.delConfirm(rowId);
										}
									}
								}, '删除')
								])
						}
					}
					],
					data: [],
					page: {
						total: 0, //总条数
						pageNum: 1, //当前页
						pageSize: 10 //每页显示条数
					},
					selection: [], //选中
					loading: true
				},
				//新增弹框
				appModal: {
                    show: false,
                    isShow: false,
					form: {
						id:'',
						name: '',
						version: '',
						url: ''	,
                        size: '',
                        system: 1,
                        platform: 1,
                        forceUpgrade: 0,	
                        createDate: '',
                        upgradeDesc: ''				
					},
					validate: {
						name: [
	                        { required: true, message: 'app名字不能为空', trigger: 'blur' }
	                    ],
	                    version: [
	                        { required: true, message: 'APP版本号不能为空', trigger: 'blur' }
	                    ],
	                    url: [
	                        { required: true, message: 'APP文件路径不能为空', trigger: 'blur' }
						],
						size: [
	                        { required: true, message: 'APP文件大小不能为空', trigger: 'blur' }
	                       
	                    ],
                        system: [
	                        { required: true, message: 'APP系统不能为空', trigger: 'blur' }
	                       
	                    ],
                        platform: [
	                        { required: true, message: 'APP平台不能为空', trigger: 'blur' }
	                       
	                    ],
					}
				}
			}
		},
		computed: {
			/**
			 * 表格行是否为选中状态
			 */
			isTableSelected() {
				return this.table.selection.length > 0;
			},
			isEdit() {
		      return !Util.vad.isBlank(this.appModal.form.id);
		    }	
		},
		mounted() {
			this.init();
		},
		methods: {
			refreshPage(){
				this.queryForm.name = '';
				this.queryForm.system = '';
                this.queryForm.platform = '';
				this.table.page.pageNum = 1;
				this.query();
			},
			init() {
				this.query();
			},
			/**
			 * 表单查询
			 */
			query() {
				let pageSize = this.table.page.pageSize;
				let pageNum = this.table.page.pageNum;
				const _this = this;
				this.axios.get('/ws/ops/v2/app/version/' + pageNum + '/' + pageSize,{ params : _this.queryForm}).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						_this.buildPageData(res.data);
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			/**
			 * 构建表格数据
			 */
			buildPageData(data_) {
				this.table.data = data_.list;
				this.table.page.total = data_.total;
			},
			/**
			 * 打开新增模态框
			 */
			showAddModal(){
				this.appModal.form.id = '';
				this.appModal.form.name = '';
				this.appModal.form.version = '';
				this.appModal.form.url = '';
				this.appModal.form.size = '';
                this.appModal.form.system = '';
                this.appModal.form.platform = '';
                this.appModal.form.forceUpgrade= '';
                this.appModal.form.upgradeDesc = '';
				this.appModal.show = true;
			},
			/**
			 * 打开编辑模态框
			 */
			showEditModal(rowId){
				this.queryById(rowId);
			},
			/**
			 * 根据id查询
			 */
			queryById(rowId){
				const _this = this;
				this.axios.get('/ws/ops/v2/app/version/' + rowId).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						_this.appModal.form.id = res.data.id;
						_this.appModal.form.name = res.data.name;
						_this.appModal.form.version = res.data.version;
						_this.appModal.form.url = res.data.url;
                        _this.appModal.form.size = res.data.size;
                        _this.appModal.form.system = res.data.system;
                        _this.appModal.form.platform = res.data.platform;
                        _this.appModal.form.upgradeDesc = res.data.upgradeDesc;
						_this.appModal.isShow = true;
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},	
			/**
			 * 新增
			 */
			saveAppVersion(){
				const _this = this;
				let postData_ = this.appModal.form;
				this.axios.post('/ws/ops/v2/app/version', postData_).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success('新增成功!');
                        _this.appModal.show = false;
						_this.query();
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('新增失败:' + message_);
					}
				});
			},
			/**
			 * 保存操作
			 */
			 submitModal(){
			 	if(this.isEdit) {
					this.editExpress();
				} else {
					this.saveAppVersion();
				}
			 },
			/**
			 * 新增弹框确认操作
			 */
			saveModal() {
				// this.$refs['expressForm'].validate((valid) => {
					this.submitModal();
					// if (valid) {
					// 	this.submitModal();
                    // } else {
                    //     this.$Message.error('表单验证失败!');
                    // }
                    
            //    });
			},
			
			/**
			 * 新增的弹框取消操作
			 */
			cancelModal() {
				this.$refs['appVersionForm'].resetFields();
				this.appModal.show = false;
            },
            /**
			 * 查看的弹框取消操作
			 */
			cancelQueryModal() {
				this.$refs['appVersionForm'].resetFields();
				this.appModal.isShow = false;
			},
			/**
			 * 删除单个提示
			 */
			delConfirm(rowId) {
				debugger;
        		const _this = this;
				this.$confirm({
        			title: '操作提示',
        			width: 300,
        			content: '你确认删除本行记录吗?',
        			onOk: function() {
        				_this.delRow(rowId);
        			}
        		});		
			},
			/**
			 * 删除单个敏感词
			 */
			delRow(rowId){
				const _this = this;
				this.axios.delete('/ws/ops/v2/app/version/' + rowId ).then(function(response) {
		      		let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success('删除成功');
						_this.query();
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('删除失败:' + message_);
					}	
			    });				
			}
		}
	}
</script>

<style scoped>
	.ws-form-select {
		width: 162px;
	}
</style>